<template>
  <div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('发票号码')" prop="invoiceCode">
        <el-input
          v-model="queryParams.invoiceCode"
          :placeholder="$t('发票号码')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('说明')" prop="remark">
        <el-input
          v-model="queryParams.remark"
          :placeholder="$t('说明')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="expenseInvoiceFolderList" border @select-all="multiOperation" @select="multiOperation">
      <el-table-column type="selection" width="40" prop="disabled" :selectable="multiOperationChoice" />
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('发票')" align="center" prop="invoiceId" width="200px">
        <template slot-scope="scope">
          <span
            class="link-type"
            style="width: 100%;float: left;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
            @click="onlinePreview(scope.row)"
          >
            {{ scope.row.fileName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('发票归属')" align="center" prop="nickName" width="100px" />
      <el-table-column :label="$t('票面金额(元)')" align="center" prop="money" width="100px">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.money, '') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('发票时间')" align="center" prop="time" width="200px">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.time) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('发票号码')" align="center" prop="invoiceCode" width="200px" />
      <el-table-column :label="$t('说明')" align="center" prop="remark" />
      <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="120px">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            icon="el-icon-link"
            :disabled="scope.row.disabled"
            @click="useHandle(scope.row)"
          >{{ $t('使用') }}</el-button>
          <el-button
            size="small"
            type="text"
            icon="el-icon-delete"
            :disabled="scope.row.disabled"
            @click="deleteHandle(scope.row)"
          >{{ $t('废弃') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 文件预览 -->
    <OnlinePreview ref="OnlinePreview" />

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div slot="footer" style="text-align: right;margin-top:20px;">
      <el-button type="warning" size="mini" :loading="loading" @click="allChoice">{{ $t("全选") }}</el-button>
      <el-button type="success" :disabled="multiSelectButton" size="mini" :loading="loading" @click="choiceUseInvoice">{{ $t('多选') }}</el-button>
      <el-button size="mini" @click="$parent.$parent.expenseInvoiceFolderLoading = false">{{ $t("关闭") }}</el-button>
    </div>
  </div>
</template>

<script>
import { listExpenseInvoiceFolder, delExpenseInvoiceFolder } from '@/api/oa/expense/expenseInvoiceFolder'
export default {
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 发票夹表格数据
      expenseInvoiceFolderList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        userId: this.$store.state.user.userId,
        invoiceCode: undefined,
        remark: undefined,
        pageNum: 1,
        pageSize: 5
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      choiceUseInvoiceArray: [],
      disabledStatus: true,
      selectedInvoice: [],
      // 多选
      multiSelectButton: true
    }
  },
  watch: {
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询发票夹列表 */
    getList() {
      this.loading = true
      listExpenseInvoiceFolder(this.queryParams).then(response => {
        this.expenseInvoiceFolderList = response.rows
        // 已选择的不可选
        if (this.selectedInvoice !== undefined && this.selectedInvoice !== null && this.selectedInvoice.length > 0) {
          try {
            this.expenseInvoiceFolderList.forEach((item, i) => {
              this.expenseInvoiceFolderList[i].disabled = false
              this.selectedInvoice.forEach(item2 => {
                if (item.invoiceCode === item2) {
                  this.expenseInvoiceFolderList[i].disabled = true
                }
              })
            })
            this.expenseInvoiceFolderList.forEach(i => {
              this.multiOperationChoice(i)
            })
          } catch (e) {
            console.log(e)
          }
          this.expenseInvoiceFolderList.sort(this.compare('disabled'))
          console.log(this.expenseInvoiceFolderList)
        } else {
          this.expenseInvoiceFolderList.forEach((item) => {
            item.disabled = false
          })
        }
        this.total = response.total
        this.loading = false
      })
    },
    compare(p) {
      return function(m, n) {
        var a = m[p]
        var b = n[p]
        return a - b
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: this.$store.state.user.userId,
        userId: undefined,
        status: '0',
        money: undefined,
        time: undefined,
        invoiceCode: undefined,
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        delFlag: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    // 一键全选发票
    allChoice() {
      this.loading = true
      listExpenseInvoiceFolder({ userId: this.$store.state.user.userId }).then(response => {
        var result = []
        response.rows && response.rows.forEach(item => {
          if (!this.selectedInvoice.includes(item.invoiceCode)) {
            result.push(item)
          }
        })
        this.$emit('useInvoiceArr', result)
        this.$parent.$parent.expenseInvoiceFolderLoading = false
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 使用发票准备, 防止重复提交
    useHandle(row) {
      this.loading = true
      setTimeout(() => {
        if (row !== undefined && this.disabledStatus) {
          this.disabledStatus = false
          this.useHandleSend(row)
        }
      }, 500)
    },
    // 使用发票
    useHandleSend(row) {
      var temp = []
      temp.push(row)
      this.$emit('useInvoiceArr', temp)
      this.$parent.$parent.expenseInvoiceFolderLoading = false
    },
    // 多选操作
    multiOperation(selection) {
      const choiceCount = selection.length
      // 选中的大于0 展示批量下载
      if (choiceCount > 0) {
        this.multiSelectButton = false
        this.choiceUseInvoiceArray = []
        selection.forEach(item => {
          this.choiceUseInvoiceArray.push(item)
        })
      } else {
        this.multiSelectButton = true
      }
    },
    // 已选择的放到页面上的发票 不能选了
    multiOperationChoice(row) {
      if (this.selectedInvoice.includes(row.invoiceCode)) {
        return false
      }
      return true
    },
    choiceUseInvoice() {
      this.loading = true
      setTimeout(() => {
        if (this.disabledStatus) {
          this.disabledStatus = false
          this.choiceUseInvoiceSend()
        }
      }, 500)
    },
    // 批量使用
    choiceUseInvoiceSend() {
      if (this.choiceUseInvoiceArray !== undefined && this.choiceUseInvoiceArray !== null && this.choiceUseInvoiceArray.length > 0) {
        this.$emit('useInvoiceArr', this.choiceUseInvoiceArray)
        this.$parent.$parent.expenseInvoiceFolderLoading = false
      } else {
        this.msgError('先选择!')
        this.loading = false
      }
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      this.$confirm(this.$t('是否继续操作?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
      }).then(function() {
          return delExpenseInvoiceFolder(row.id)
      }).then(() => {
          this.getList()
          this.msgSuccess(this.$t('删除成功'))
      }).catch(function() {
      })
    },
    // 预览附件
    onlinePreview(row) {
      this.$refs.OnlinePreview.onlinePreviewFile(row.invoiceId)
    }
  }
}
</script>
